<template>
    <div>
        <comp ref="line" :params="params" height="300px" width="100%" />
    </div>
</template>
<script>
import comp from "./../line/index";
export default {
    name: "test",
    title: "自定义折线颜色",
    components: { comp },
    theme: "black",
    data() {
        return {
            params: {},
            dataCols: {
                dimension: ["日期"],
                legend: {
                    data: ["类型1", "类型2", "类型3"],
                },
                series: [
                    {
                        日期: "1月",
                        类型1: 4,
                        类型2: "1.5",
                        类型3: "6",
                    },
                    {
                        日期: "2月",
                        类型1: 4.2,
                        类型2: "2.5",
                        类型3: "6",
                    },
                    {
                        日期: "3月",
                        类型1: 5,
                        类型2: "3.5",
                        类型3: "6",
                    },
                    {
                        日期: "4月",
                        类型1: 3.5,
                        类型2: "5.1",
                        类型3: "6",
                    },
                    {
                        日期: "5月",
                        类型1: 4.8,
                        类型2: "4.5",
                        类型3: "6",
                    },
                    {
                        日期: "6月",
                        类型1: 5,
                        类型2: "1.5",
                        类型3: "7.6",
                    },
                    {
                        日期: "7月",
                        类型1: 3,
                        类型2: "6.5",
                        类型3: "6",
                    },
                    {
                        日期: "8月",
                        类型1: 2,
                        类型2: "9.5",
                        类型3: "6",
                    },
                    {
                        日期: "9月",
                        类型1: 4.5,
                        类型2: "5.5",
                        类型3: "6.6",
                    },
                    {
                        日期: "10月",
                        类型1: 3.9,
                        类型2: "1.5",
                        类型3: "6",
                    },
                    {
                        日期: "11月",
                        类型1: 4.8,
                        类型2: "5.5",
                        类型3: "6",
                    },
                    {
                        日期: "12月",
                        类型1: 4.6,
                        类型2: "9.5",
                        类型3: "6",
                    },
                ],
            },
            setting: {
                legend: {
                    show: true,
                    itemWidth: 20,
                },
                color: ["blue"],

                yAxis: {
                    axisLine: {
                        show: true,
                    },
                },
                yAxisName: ["个"],
                series: {
                    linear: {
                        类型2: ["#f30", "#f60"],
                        类型3: ["green", "red"],
                    },
                    markPointObj: {
                        类型1: { //配置参考echarts
                            data: [ 
                                {
                                    type: "max",
                                    name: "最大值",
                                },
                            ],
                        },
                        类型2: { //配置参考echarts
                            label:{
                                color:'green'
                            },
                            data: [ 
                                {
                                    type: "min",
                                    name: "最小值",
                                },
                            ],
                        }
                    },
                    lineStyle: {
                        width: 2,
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.5,
                        },
                    },
                },
            },
        };
    },
    mounted() {
        this.$nextTick(() => {
            let param = {
                dataCols: this.dataCols,
                setting: this.setting,
            };
            this.params = { ...param };
        });
    },
    beforeDestroy() {},
};
</script>